<script setup>
const props = defineProps({
  showTitle: {
    type: Boolean,
    default: true
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  customStyle: {
    type: Object,
    default: () => {
      return {
        height: '2.6rem'
      }
    }
  },
  title: {
    type: String,
    default: '名称'
  },
  svgSize: {
    type: Number,
    default: 1
  }
})
</script>

<template>
  <BorderBox8 class="screen-box" :style="customStyle">
    <div class="box-header-icon" v-if="showIcon">
      <svg width="12" height="12"><defs><g id="decoration-12-g-3ebc6a498b7a44f285d0dd534688a463"><path stroke="rgba(39,131,206,1)" stroke-width="6" fill="transparent" d="M6,3 A3, 3 0 0 0 5.89530,3.00183"></path><path stroke="rgba(39,131,206,0.9655172413793103)" stroke-width="6" fill="transparent" d="M5.89530,3.00183 A3, 3 0 0 0 5.79073,3.00731"></path><path stroke="rgba(39,131,206,0.9310344827586207)" stroke-width="6" fill="transparent" d="M5.79073,3.00731 A3, 3 0 0 0 5.68641,3.01643"></path><path stroke="rgba(39,131,206,0.896551724137931)" stroke-width="6" fill="transparent" d="M5.68641,3.01643 A3, 3 0 0 0 5.58248,3.02920"></path><path stroke="rgba(39,131,206,0.8620689655172414)" stroke-width="6" fill="transparent" d="M5.58248,3.02920 A3, 3 0 0 0 5.47906,3.04558"></path><path stroke="rgba(39,131,206,0.8275862068965517)" stroke-width="6" fill="transparent" d="M5.47906,3.04558 A3, 3 0 0 0 5.37626,3.06556"></path><path stroke="rgba(39,131,206,0.7931034482758621)" stroke-width="6" fill="transparent" d="M5.37626,3.06556 A3, 3 0 0 0 5.27423,3.08911"></path><path stroke="rgba(39,131,206,0.7586206896551724)" stroke-width="6" fill="transparent" d="M5.27423,3.08911 A3, 3 0 0 0 5.17309,3.11621"></path><path stroke="rgba(39,131,206,0.7241379310344829)" stroke-width="6" fill="transparent" d="M5.17309,3.11621 A3, 3 0 0 0 5.07295,3.14683"></path><path stroke="rgba(39,131,206,0.6896551724137931)" stroke-width="6" fill="transparent" d="M5.07295,3.14683 A3, 3 0 0 0 4.97394,3.18092"></path><path stroke="rgba(39,131,206,0.6551724137931035)" stroke-width="6" fill="transparent" d="M4.97394,3.18092 A3, 3 0 0 0 4.87618,3.21845"></path><path stroke="rgba(39,131,206,0.6206896551724138)" stroke-width="6" fill="transparent" d="M4.87618,3.21845 A3, 3 0 0 0 4.77979,3.25936"></path><path stroke="rgba(39,131,206,0.5862068965517241)" stroke-width="6" fill="transparent" d="M4.77979,3.25936 A3, 3 0 0 0 4.68489,3.30362"></path><path stroke="rgba(39,131,206,0.5517241379310345)" stroke-width="6" fill="transparent" d="M4.68489,3.30362 A3, 3 0 0 0 4.59159,3.35116"></path><path stroke="rgba(39,131,206,0.5172413793103449)" stroke-width="6" fill="transparent" d="M4.59159,3.35116 A3, 3 0 0 0 4.50000,3.40192"></path><path stroke="rgba(39,131,206,0.48275862068965525)" stroke-width="6" fill="transparent" d="M4.50000,3.40192 A3, 3 0 0 0 4.41024,3.45586"></path><path stroke="rgba(39,131,206,0.4482758620689655)" stroke-width="6" fill="transparent" d="M4.41024,3.45586 A3, 3 0 0 0 4.32242,3.51289"></path><path stroke="rgba(39,131,206,0.41379310344827586)" stroke-width="6" fill="transparent" d="M4.32242,3.51289 A3, 3 0 0 0 4.23664,3.57295"></path><path stroke="rgba(39,131,206,0.37931034482758624)" stroke-width="6" fill="transparent" d="M4.23664,3.57295 A3, 3 0 0 0 4.15302,3.63597"></path><path stroke="rgba(39,131,206,0.34482758620689663)" stroke-width="6" fill="transparent" d="M4.15302,3.63597 A3, 3 0 0 0 4.07164,3.70187"></path><path stroke="rgba(39,131,206,0.31034482758620696)" stroke-width="6" fill="transparent" d="M4.07164,3.70187 A3, 3 0 0 0 3.99261,3.77057"></path><path stroke="rgba(39,131,206,0.2758620689655173)" stroke-width="6" fill="transparent" d="M3.99261,3.77057 A3, 3 0 0 0 3.91602,3.84198"></path><path stroke="rgba(39,131,206,0.24137931034482762)" stroke-width="6" fill="transparent" d="M3.91602,3.84198 A3, 3 0 0 0 3.84198,3.91602"></path><path stroke="rgba(39,131,206,0.20689655172413793)" stroke-width="6" fill="transparent" d="M3.84198,3.91602 A3, 3 0 0 0 3.77057,3.99261"></path><path stroke="rgba(39,131,206,0.17241379310344826)" stroke-width="6" fill="transparent" d="M3.77057,3.99261 A3, 3 0 0 0 3.70187,4.07164"></path><path stroke="rgba(39,131,206,0.13793103448275873)" stroke-width="6" fill="transparent" d="M3.70187,4.07164 A3, 3 0 0 0 3.63597,4.15302"></path><path stroke="rgba(39,131,206,0.10344827586206903)" stroke-width="6" fill="transparent" d="M3.63597,4.15302 A3, 3 0 0 0 3.57295,4.23664"></path><path stroke="rgba(39,131,206,0.06896551724137936)" stroke-width="6" fill="transparent" d="M3.57295,4.23664 A3, 3 0 0 0 3.51289,4.32242"></path><path stroke="rgba(39,131,206,0.03448275862068968)" stroke-width="6" fill="transparent" d="M3.51289,4.32242 A3, 3 0 0 0 3.45586,4.41024"></path><path stroke="rgba(39,131,206,0)" stroke-width="6" fill="transparent" d="M3.45586,4.41024 A3, 3 0 0 0 3.40192,4.50000"></path></g><radialGradient id="decoration-12-gradient-3ebc6a498b7a44f285d0dd534688a463" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="transparent" stop-opacity="1"></stop><stop offset="100%" stop-color="rgba(44,247,254,0.3)" stop-opacity="1"></stop></radialGradient></defs><circle r="1.8333333333333333" cx="6" cy="6" stroke="#2cf7fe" stroke-width="0.5" fill="transparent"></circle><circle r="3.6666666666666665" cx="6" cy="6" stroke="#2cf7fe" stroke-width="0.5" fill="transparent"></circle><circle r="5.5" cx="6" cy="6" stroke="#2cf7fe" stroke-width="0.5" fill="transparent"></circle><circle r="1" cx="6" cy="6" stroke="transparent" fill="url(#decoration-12-gradient-3ebc6a498b7a44f285d0dd534688a463)"><animate attributeName="r" values="1;6" dur="2s" repeatCount="indefinite"></animate><animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite"></animate></circle><circle r="2" cx="6" cy="6" fill="#2cf7fe"></circle><g><polyline points="11.196152422706632,9 0.8038475772933671,3.0000000000000018" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline><polyline points="9,11.196152422706632 2.9999999999999973,0.8038475772933698" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline><polyline points="6,12 5.999999999999999,0" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline><polyline points="3.0000000000000013,11.196152422706632 8.999999999999996,0.8038475772933662" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline><polyline points="0.8038475772933689,9.000000000000002 11.19615242270663,2.9999999999999973" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline><polyline points="0,6.000000000000001 12,5.999999999999998" stroke="#2cf7fe" stroke-width="0.5" opacity="0.5"></polyline></g><path d="M10.330127018922195,8.5 A6, 6 0 0 1 8.5,10.330127018922193" stroke="#2cf7fe" stroke-width="2" fill="transparent"></path><path d="M3.500000000000001,10.330127018922195 A6, 6 0 0 1 1.6698729810778072,8.500000000000002" stroke="#2cf7fe" stroke-width="2" fill="transparent"></path><path d="M1.6698729810778055,3.5000000000000013 A6, 6 0 0 1 3.499999999999998,1.6698729810778081" stroke="#2cf7fe" stroke-width="2" fill="transparent"></path><path d="M8.499999999999996,1.6698729810778046 A6, 6 0 0 1 10.330127018922191,3.499999999999998" stroke="#2cf7fe" stroke-width="2" fill="transparent"></path><use xlink:href="#decoration-12-g-3ebc6a498b7a44f285d0dd534688a463"><animateTransform attributeName="transform" type="rotate" values="0, 6 6;360, 6 6" dur="3s" repeatCount="indefinite"></animateTransform></use></svg>
      <div class="decoration-content"></div>
    </div>
    <div class="box-title" v-if="showTitle">
      <div class="box-title-value">
        名称
      </div>
    </div>
    <slot></slot>
  </BorderBox8>
</template>

<style lang="scss">
.screen-box {
  flex-shrink: 0;
  .box-header-icon {
    width: 12px; height: 18px;
    .decoration-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .box-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    .box-title-value {
      color: #12f2ef;
      margin-left: 18px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 4px;
        width: 5px;
        height: 12px;
        border-radius: 2px;
        background: #12f2ef;
      }
    }
  }
}
</style>